<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户列表</title>
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <link rel="stylesheet" href="../assets/css/admin.css"/>
</head>
<body class="layui-view-body">
    <div class="layui-content">
    	<!--面包屑导航-->
    	<div class="mianb">
    		<div class="mblf layui-col-xs6 layui-col-md6">
    			 <i class="layui-icon">&#xe656;</i>
    			 <p>首页管理 > <span>用户列表</span></p>
    		</div>
    		<div class="mbrt layui-col-xs6 layui-col-md6">
    			<a href="javascript:;" class="layui-btn layui-btn-normal" id="addbanner">增加</a>
    		</div>
    	</div>
    	<!--面包屑导航-->
        <div class="layui-row">
            <div class="layui-card">
            	<div class="table-responsive">
					<div  style="display: inline;float: left;">

						<button type="button" name="selectAll"  id="selectAll"    class="layui-btn  layui-btn-normal layui-btn-xs float-left">全选</button>
						<button type="button" name="cancelSelect"   id="cancelSelect"  style="margin-left: 20px" class="layui-btn  layui-btn-normal layui-btn-xs float-left">取消全选</button>
						<a id="deleteAll" class="layui-btn layui-btn-danger layui-btn-xs ">批量删除</a>
					</div>

			 		  <table class="layui-table" lay-skin="line" lay-size="lg" id="userTable">
						  <thead>
						    <tr>
								<!--<th ></th>-->
						      <th >选择</th>
								<th >排序</th>
						      <th>用户名</th>
						      <th>姓名</th>
						      <th>操作</th>
						    </tr>
						  </thead>
						  <tbody>


						  <tr th:each="user, listDStat : ${userList}" >
								<td  class="layui-field-box" ><input type="checkbox" th:value="${user.id}" id="selectItem" name="selectItem"></td>
						      <td  class="layui-form" >[[${listDStat.index+1}]]</td>
						      <td  class="layui-form" >[[${user.username}]]</td>
						      <td  class="layui-form" >[[${user.name}]]</td>
						      <td>
						      	  <div class="layui-table-cell laytable-cell-1-0-10">
							      	  	<a class="layui-btn layui-btn-normal layui-btn-xs edit" id="edit">修改</a>
							      	  	<a class="layui-btn layui-btn-danger layui-btn-xs delete" >删除</a>
						      	  </div>
						      </td>
						    </tr>

						  </tbody>
					</table>
			 	</div>

           		<!--分页-->
           		<div id="page"></div>
           		<!--分页-->
            </div>
        </div>
    </div>
    <script src="../assets/jquery.min.js"></script>
    <script src="../assets/layui.all.js"></script>
    <script>
    	var element = layui.element;
    	layui.use(['laypage', 'layer'], function(){
		  var laypage = layui.laypage
		  ,layer = layui.layer;

		  //页码完整功能
		  laypage.render({
		    elem: 'page'
		    ,count: 100
		    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
		    ,jump: function(obj){
		      console.log(obj)
		    }
		  });
		});

		//添加弹框
		$('#addbanner').on('click', function(){
		  layui.use('layer', function(){
          var layer = layui.layer;
          layer.open({
                type: 2,
                title: '添加用户',
                fix: false,
                shadeClose: true,
                shade: 0.8,
                area: ['660px', '420px'],
                content: 'openUser',
                end: function () {
                   location.reload();
                }
            });
        });
      })

        //修改弹框
        $('.edit').on('click', function(){
            var tr = $(this).closest('tr');//找到tr元素
            var id = tr.find('td:eq(0)').find("INPUT[type ='checkbox' ]").val();//找到td元素
            layui.use('layer', function(){
                var layer = layui.layer;
                layer.open({
                    type: 2,
                    title: '修改用户',
                    fix: false,
                    shadeClose: true,
                    shade: 0.8,
                    area: ['660px', '420px'],
                    content: 'openEdit?id='+id,
                    end: function () {
                        location.reload();
                    }
                });
            });
        })

      //全选
        $("#selectAll").click(function(){
            $('[name=selectItem]:checkbox').each(function(){
                this.checked=true;
            });
        });
        //取消全选
        $("#cancelSelect").click(function(){
            $('[name=selectItem]:checkbox').each(function(){
                this.checked=false;
            });
        });
		//判断弹框
		$(".delete").click(function(row){
            var tr = $(this).closest('tr');//找到tr元素
            var id = tr.find('td:eq(0)').find("INPUT[type ='checkbox' ]").val();//找到td元素
            var td = this.closest("td");
			layer.confirm('确定要删除此信息？', {
			  btn: ['是','否'] //按钮
			}, function(){
				$.ajax({
					url: '/deleteUser',
					data:{id:id},
					success: function (data) {
						layer.msg('已删除', {icon: 1});
						window.location.reload()
					}
				});


			}, function(){
			  layer.msg('已取消',  {icon: 2});
			});
		})
        $("#deleteAll").click(function(){
            var chk_value =[];//定义一个数组
            $('input[name="selectItem"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数
                chk_value.push($(this).val());//将选中的值添加到数组chk_value中
            });
            if(0==chk_value.length){

                layer.msg('至少选择一条', {icon: 2});
            }else{
                layer.confirm('确定要删除选中信息？', {
                    btn: ['是','否'] //按钮

                }, function(){
                    layer.msg('已删除', {icon: 1});
                    $.ajax({
                        url: '/deleteBatchUser',
                        data:{ids:JSON.stringify(chk_value)},
                        success: function (data) {
                        }
                    });
                    window.location.reload();
                }, function(){
                    layer.msg('已取消',  {icon: 2});
                });
			}

        })
		 layui.use('form', function(){
		  var form = layui.form;
		  form.render();
		});
	</script>
	<script>
		//调用示例
		layer.photos({
		  photos: '.layer-photos-demo'
		  ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
		});
		</script>
</body>
</html>
